<template>
  <div class="fun-cell-wrap fz-16" @click="bindClick">
    <layout-icon class="p-10" size="20" v-if="leftIcon" :type="leftIcon"></layout-icon>
    <slot v-else name="icon" />
    <div class="left">
      <slot name="title"><div v-if="title" class="title m-b-10 c3">{{title}}</div></slot>
      <slot name="label"><div v-if="label" class="label fz-12 c6">{{label}}</div></slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="right" v-if="showRight">
      <slot name="right"><layout-icon size="16" type="icon-icon-arrow-right-copy"></layout-icon></slot>
    </div>

  </div>
</template>
<script>
import { componetMixin } from '@/mixins'
import LayoutIcon from '@/components/layout-icon/layout-icon'

export default {
  name: 'fun-cell',
  components: { LayoutIcon },
  mixins: [componetMixin],
  props: {
    leftIcon: {
      rquired: false,
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    showRight: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    bindClick () {
      this.$emit('bclick')
    }
  }
}
</script>
<style lang="scss" scoped>
.fun-cell-wrap{
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  padding: 10px 0;
  .left{
    padding-left: 15px;
  }
  .right{
    padding-right: 15px;
  }
  .content{
    flex:1;
  }
}
</style>
